<template>
    <div class="Detail" ref="Essay_ref">
        <div class="tips">
            <div>
                <img @click="goTop" style="width: 5vw;" :src="base_url + '/assets/svg/gotop.svg'" alt="">

            </div>
            <div>
                <img @click="goBottom" style="width: 3vw;" :src="base_url + '/assets/svg/gobottom.svg'" alt="">

            </div>
        </div>
        <div class="item">
            <div class="header">
                <el-image :src="base_url + detail?.cover_img" :lazy="true"></el-image>
                <div class="title">
                    {{ detail?.title }}
                </div>
            </div>
            <div class="infos">
                <div class="time">
                    <img :src="base_url + '/assets/svg/home/essay/timer.svg'" alt="">
                    <span>编辑时间{{ detail?.end_time }}</span>
                </div>
                <div class="e_c_l">
                    <div class="item">
                        <img :src="base_url + '/assets/svg/home/routine/eye.svg'" alt="">
                        <span>{{ detail?.browse }}浏览</span>
                    </div>
                    <div class="item">
                        <img :src="base_url + '/assets/svg/home/routine/comment.svg'" alt="">
                        <span>{{ detail?.review }}评论</span>
                    </div>
                    <div class="item">
                        <img :src="base_url + '/assets/svg/home/routine/likes.svg'" alt="">
                        <span>{{ detail?.likes?.length }}点赞</span>
                    </div>
                </div>
            </div>
            <div class="content">
                <Editor style="width: 100%;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
                    @onCreated="handleCreated" />

            </div>

        </div>
        <div class="comment" v-if="discussList.length !== 0">
            <Com_item v-for="item in discussList" :key="item._id" :item="item"></Com_item>

        </div>
        <div class="send">
            <div class="top">
                <img :src="base_url + '/assets/svg/Editing.svg'" alt="">
                <span>发布一条</span>
                <el-tag v-if="replay_name" closable type="warning" effect="dark" @close="close_item">
                    回复:{{ replay_name }}
                </el-tag>

            </div>
            <div class="data">
                <el-input v-model="textarea" :rows="5" type="textarea" placeholder="留下你的痕迹...." />
                <el-button style="width: 20%;margin-top: 1vw;font-size: 1vw;" type="primary" size="default"
                    @click="up_disscuss" plain>提交</el-button>

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css'
//@ts-ignore
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { useRoute } from 'vue-router';
import { onMounted, ref, shallowRef, nextTick, reactive, watch } from 'vue';
import Com_item from '@/components/Comment_item/Com_item.vue';
import { Get_essaay_detail, add_discuss_count } from "@/apis/web/WebApi"
import { type Eassay_detaile } from '@/types/Eassy'
import { type Discuss } from '@/types/Discuss';
import { format } from "@/utils/formatTime"
import { user_info } from "@/utils/Local"
import { add_discuss, get_discuss } from '@/apis/web/DiscussApi';
import { ElMessage } from 'element-plus';
import DiscussStore from '@/store/DiscussStore';
const Essay_ref = ref()
const store = DiscussStore()
const Common_user = user_info.Get_info()
const base_url = import.meta.env.VITE_APP_URL
const valueHtml = ref('<p>hello</p>')
const editorRef = shallowRef()
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    editorRef.value.disable()
}
const replay_name = ref("")
const mode = ref("default")
const route = useRoute()
const textarea = ref('')
const detail = ref<Eassay_detaile>()
const discussInfor = reactive<Discuss>({
    article_id: route.params.id as string,
    user_id: Common_user._id,
    comment_text: '',
    comment_date: Date.now(),
    parent_comment_id: '',
    dis_type: "essay"
})
const discussList = ref<any>([])
onMounted(() => {
    getDetail()
    getDiscuss()
})
const getDiscuss = async () => {
    const result = await get_discuss(route.params.id as string)
    console.log(result)
    discussList.value = result.data
}
const getDetail = async () => {
    const result: any = await Get_essaay_detail(route.params.id as string)

    result.data.end_time = format.formatDate(result.data.end_time)
    detail.value = result.data
    console.log(detail.value?.end_time)
    nextTick(() => {
        editorRef.value.setHtml(detail.value?.rich_text)
    })
}
const editorConfig = {
    placeholder: '请输入内容...', MENU_CONF: {
        'codeSelectLang': {

        },
        "uploadImage": {}
    }
}
const up_disscuss = async () => {
    if (!user_info.Get_info()) {
        ElMessage({
            type: "warning",
            message: '登录后发布'
        })
        return
    }
    const current_id = user_info.Get_info()._id

    if (textarea.value.trim() === '') {
        ElMessage({
            type: "error",
            message: "请输入内容"
        })
        return
    }
    discussInfor.comment_text = textarea.value
    discussInfor.comment_date = Date.now()
    discussInfor.user_id = current_id
    discussInfor.dis_type = 'essay'
    const result: any = await add_discuss(discussInfor)

    if (result.code == 200) {
        add_discuss_count(discussInfor.article_id)

        Object.assign(discussInfor, {
            comment_text: '',
            comment_date: Date.now(),
            parent_comment_id: ''
        })
        ElMessage({
            type: "success",
            message: "评论成功"
        })
        textarea.value = ''
        getDiscuss()
    } else {
        ElMessage({
            type: "error",
            message: "评论失败"
        })
        Object.assign(discussInfor, {
            comment_text: '',
            comment_date: Date.now(),
            parent_comment_id: ''
        })
        textarea.value = ''
    }
}


watch(store.will_reply, () => {
    console.log("比那了")
    replay_name.value = store.will_reply.username
    discussInfor.parent_comment_id = store.will_reply.parent_comment_id

    Essay_ref.value?.scrollTo({ top: Essay_ref.value.scrollHeight, behavior: "smooth" });

})

//取消回复他人
const close_item = () => {
    store.will_reply.parent_comment_id = ''
    store.will_reply.username = ''
    discussInfor.user_id = Common_user._id
    discussInfor.parent_comment_id = ''
    replay_name.value = ''
}
//回到顶部
const goTop = () => {
    Essay_ref.value?.scrollTo({ top: 0, behavior: "smooth" });
}
const goBottom = () => {
    Essay_ref.value?.scrollTo({ top: Essay_ref.value.scrollHeight, behavior: "smooth" });
}
</script>

<style scoped lang="scss">
.Detail {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 90vh;
    overflow-y: scroll;

    .tips {
        position: absolute;
        right: 15vw;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        div {
            margin-bottom: 1vw;
        }
    }

    :deep(.w-e-text-container) {
        background-color: transparent;
    }

    .item {

        width: 50%;
        background-color: rgba(255, 255, 255, 0.8);
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;

        .header {
            width: 100%;
            overflow: hidden;
            height: 40vh;
            position: relative;

            .title {
                padding: 1vw;
                width: 100%;
                position: sticky;
                bottom: 0;
                color: white;
                background-color: rgba(0, 0, 0, 0.5);
                font-size: 1vw;
            }

            .el-image {
                width: 100%;
                height: 100%;
                transition: all 1s;
            }

            .el-image:hover {
                transform: scale(1.5);
            }
        }

        .infos {
            font-size: 1vw;
            padding: 1vw;
            display: flex;
            justify-content: space-between;

            .time {
                display: flex;
                align-items: center;

                flex:1 span {
                    font-size: 1vw;
                }

                img {
                    width: 8%;
                    margin-right: 0.5vw;
                }

            }

            .e_c_l {
                flex: 1;
                display: flex;

                .item {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    background-color: transparent;

                    span {
                        font-size: 1vw;
                    }

                    img {
                        width: 20%;
                        margin-right: 0.5vw;
                    }
                }
            }
        }

        .content {
            font-size: 1vw;
            padding: 1vw;
        }


    }

    .comment {
        width: 50%;
        background-color: rgba(255, 255, 255, 0.7);
        margin-top: 2vw;
        padding: 1vw;
        box-sizing: border-box;


        .comment_item {
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid black;
            padding: 0.5vw;
            box-sizing: border-box;

            .userinfo {
                display: flex;
                align-items: center;

                .el-avatar {
                    width: 3vw;
                    height: 3vw;
                    margin-right: 0.5vw;
                }

                span {
                    font-size: 1vw;
                    font-weight: bold;
                    color: #009688
                }
            }

            .content {
                align-self: flex-end;
                width: 89%;
                margin-top: 0.5vw;
                background-color: #88D8B0;
                padding: 1vw;
                border-radius: 10px;
                font-size: 1vw;
            }
        }
    }

    .send {

        margin-top: 1vw;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .top {
            width: 50%;
            display: flex;
            align-items: center;
            background-color: #F1FAEE;
            border-bottom: 2px dashed orange;

            img {
                width: 8%;
            }

            span {
                margin-left: 1vw;
                font-size: 1vw;
            }
        }

        .data {
            width: 50%;
            background-color: #F1FAEE;
            padding: 1vw;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
            overflow: hidden;

            .el-input {
                width: 100%;
                font-size: 1vw;

            }
        }
    }
}
</style>